<template>
  <div class="main-container">
    <el-form inline>
      <el-form-item>
        <h1>工时信息查询</h1>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchDrawingNumber" clearable placeholder="请输入图号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table border stripe :data="dateList" show-summary>
      <el-table-column prop="drawingNumber" label="图号" align="center" width="200"></el-table-column>
      <el-table-column prop="noticeNumber" label="订单号" align="right" min-width="100"> </el-table-column>
      <el-table-column prop="sequenceId" label="序号" align="right" min-width="100"> </el-table-column>
      <el-table-column prop="number" label="数量" align="center" min-width="100"> </el-table-column>
      <el-table-column prop="quotaHour" label="定额工时" align="center" min-width="100"> </el-table-column>
      <el-table-column prop="workHour" label="实动总工时" align="center" min-width="100"> </el-table-column>
      <el-table-column prop="averageWorkHour" label="平均用时" align="center" min-width="100"> </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showDispatchDetail(scope.row)">派工明细</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getProductionReportApi } from '@/api/report/api_report_work_hour'
import { namespace } from 'vuex-class'
const vuexReport = namespace('Report')

@Component({
  components: {}
})
export default class ProductionSummary extends Vue {
  @vuexReport.State drawingNumber
  @vuexReport.Mutation setDrawingNumber
  searchDrawingNumber: any = ''
  dateList: any = []

  /**
   * 生命周期函数：组件加载
   */
  created() {
    if (this.drawingNumber != '') {
      this.searchDrawingNumber = this.drawingNumber
      this.query()
    }
  }

  /**
   * 异步查询方法
   * 获取报表数据
   */
  async query() {
    console.log('查询图号：' + this.searchDrawingNumber)
    // 绑定 State 缓存中的 图号 数据
    this.setDrawingNumber(this.searchDrawingNumber)
    // 异步请求获取列表数据
    await getProductionReportApi({ drawingNumber: this.searchDrawingNumber }).then(res => (this.dateList = res.data))
  }

  /**
   * 跳转至路线单列表页面，
   * 初始查询时间范围为上月24日至本月23日
   */
  showDispatchDetail(row) {
    this.$router.push({
      name: 'menuA1DispatchForm',
      params: {
        from: 'notice',
        drawingNumber: row.drawingNumber
      }
    })
  }
}
</script>

<style></style>
